<style>
  .btn-success {
    background-color: #ffc200;
  }
  .row .item {
    padding: 8px;
  }
  .row .card {
    height: 300px;
    padding: 15px;
    background-color: #fff;
  }
  .btn-group .active {
    background-color: #fdd21b;
  }
</style>
<div class="panel panel-default panel-intro">
  <div class="panel-heading" style="background-color: #f3f4f7;display: flex;justify-content: space-between;align-items: center;padding-top:0;">
    <!-- 日期选择单选框组 -->
    <div class="btn-group" data-toggle="buttons" role="group">
      <label class="btn btn-default btn-date">
        <input
          type="radio"
          name="dateOptions"
          value="yesterday"
          autocomplete="off"
        />
        昨天
      </label>
      <label class="btn btn-default btn-date active">
        <input
          type="radio"
          name="dateOptions"
          value="last7days"
          autocomplete="off"
          checked
        />
        近7日
      </label>
      <label class="btn btn-default btn-date">
        <input
          type="radio"
          name="dateOptions"
          value="last30days"
          autocomplete="off"
        />
        近30天
      </label>
      <label class="btn btn-default btn-date">
        <input
          type="radio"
          name="dateOptions"
          value="thisWeek"
          autocomplete="off"
        />
        本周
      </label>
      <label class="btn btn-default btn-date">
        <input
          type="radio"
          name="dateOptions"
          value="thisMonth"
          autocomplete="off"
        />
        本月
      </label>
    </div>

    
    <a href="report/export" type="button" class="btn btn-default"><span class="glyphicon glyphicon-cloud-upload"></span> 数据导出</a>
    
    <!-- 日期信息显示 -->
    <!-- <div class="date-info">
      <strong>日期范围：</strong>
      <span id="date-range">2023-11-06 至 2023-11-12</span>
    </div> -->
  </div>

  <div class="panel-body" style="background-color: #f3f4f7; padding-top: 0">
    <div class="row">
      <div class="col-lg-6 item">
        <div class="card">
          <div
            id="turnoverStatistics"
            class="btn-refresh"
            style="height: 100%; width: 100%"
          ></div>
        </div>
      </div>
      <div class="col-lg-6 item">
        <div class="card">
          <div
            id="userStatistics"
            class="btn-refresh"
            style="height: 100%; width: 100%"
          ></div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-6 item">
        <div class="card">
          <!-- 暂时没想好怎么布局 -->
          <!-- <h4>订单统计</h4>
            <div style="display: flex;align-items: center;gap: 15px;">
                <div>
                    <p>订单完成率</p>
                    <h4>{$orderfulfillmentrate}%</h4>
                </div>
                <div>
                    <h4>=</h4>
                </div>
                <div>
                    <p>有效订单</p>
                    <h4>{$effctordercount}</h4>
                </div>
                <div>
                    <h4>/</h4>
                </div>
                <div>
                    <p>订单总数</p>
                    <h4>{$ordercount}</h4>
                </div>
            </div> -->
          <div
            id="orderStatistics"
            class="btn-refresh"
            style="height: 100%; width: 100%"
          ></div>
        </div>
      </div>
      <div class="col-lg-6 item">
        <div class="card">
          <div
            id="salesRanking"
            class="btn-refresh"
            style="height: 100%; width: 100%"
          ></div>
        </div>
      </div>
    </div>
  </div>
</div>
